<template>
  <div v-if="subscribeTips && subscribeTips.length">
    <div class="open_close_swicth" @click="closeOpen">
      <div v-if="isClose">
        展开
        <div class="open_image"></div>
      </div>
      <div v-else>
        收起
        <div class="close_image"></div>
      </div>
    </div>
    <div
      :class="isClose ? 'desc_content_detail' : 'scroll_content_req'"
      @scroll="scrollBottom($event)"
      ref="sortMenu"
    >
      <div class="subscribe_remind_wrapper" v-for="(item, index) in subscribeTips" :key="index">
        <div>{{ item.add_date }}</div>
        <p>{{ item.word }}</p>
      </div>
    </div>
  </div>
  <div v-else>
    <NoData :textTip="textTip"></NoData>
  </div>
</template>

<script>
import { SEND_MSG_QUERY } from '@/apis';
import NoData from './NoData.vue';
export default {
  name: 'SubMsgList',
  data() {
    return {
      subscribeTips: [],
      tempArr: [],
      isClose: true,
      page: 1, // 根据接口定义的初始值
      loadLock: false, // 请求锁
      pageSize: 4,
      textTip: '暂无订阅消息',
      subList: [],
    };
  },
  components: {
    NoData,
  },
  computed: {
    //重新加载
    reload() {
      return this.$store.state.baseInfo.reload;
    },
  },
  watch: {
    reload: {
      handler(newValue) {
        if (newValue) {
          this.queryOrderInfo();
          this.$store.commit('setBaseInfo', { reload: '' });
        }
      },
    },
  },
  mounted() {
    this.queryOrderInfo();
    this.tempArr = this.subscribeTips;
  },
  methods: {
    scrollBottom(e) {
      const self = this;
      const Scroll = e.target;
      const scrollHeight = Scroll.scrollHeight - Scroll.clientHeight;
      self.scrollTop = Scroll.scrollTop;
      if (scrollHeight - Scroll.scrollTop < 100 && !self.loadLock) {
        self.loadLock = true;
        self.page++;
        self.queryOrderInfo();
      }
    },
    closeOpen() {
      if (this.subscribeTips.length === 1) {
        return;
      }
      this.isClose = !this.isClose;
      if (!this.isClose) {
        this.subscribeTips = this.tempArr;
      } else {
        this.subscribeTips = this.subList;
      }
    },
    async queryOrderInfo() {
      const params = {
        page: this.page,
        page_size: this.pageSize,
      };
      try {
        const res = await SEND_MSG_QUERY(params);
        if (Number(res.code) === 0) {
          res.data.content.forEach(element => {
            this.subscribeTips.push(element);
            this.loadLock = false;
          });
          this.subList = [];
          this.subList.push(this.subscribeTips[0]);
          this.subList.push(this.subscribeTips[1]);
        } else {
          this.loadLock = false;
        }
      } catch (error) {
        _t.errorReport({name:`SubMsgList.vue组件中方法queryOrderInfo错误。${error.name}`,message:`接口url：${_Global.api.isSendMsg}，参数：${JSON.stringify(params)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
  },
};
</script>

<style lang="less" scoped>
.scroll_content_req {
  opacity: 1;
  max-height: 8.2rem;
  overflow-y: scroll;
  transition: all 0.3s ease-in-out;
}
.desc_content_detail {
  opacity: 1;
  max-height: 4.2rem;
  overflow: hidden;
}
.open_close_swicth {
  position: absolute;
  bottom: 0.2rem;
  width: 100%;
  color: #999999;
  text-align: center;
  img {
    width: 0.38rem;
    height: 0.3rem;
    margin-bottom: 0.1rem;
    margin-right: 3%;
  }
}
[theme-mode='black'] .open_close_swicth {
  position: absolute;
  bottom: 0.2rem;
  width: 100%;
  color: #666666;
  text-align: center;
  img {
    width: 0.38rem;
    height: 0.3rem;
    margin-bottom: 0.1rem;
    margin-right: 3%;
  }
}
.subscribe_remind_wrapper {
  padding: 4% 3.2%;
  border-top: 0.01rem solid #eeeeee;
  margin-bottom: 0.2rem;
  div:nth-child(1) {
    font-size: 0.28rem;
    color: #666666;
    div {
      right: 3%;
      top: 14%;
      font-size: 0.28rem;
      color: #999999;
    }
  }
  p {
    font-size: 0.32rem;
    color: #323232;
    margin-top: 2%;
    line-height: 0.4rem;
  }
}
[theme-mode='black'] .subscribe_remind_wrapper {
  padding: 4% 3.2%;
  border-top: 0.01rem solid #222222;
  margin-bottom: 0.2rem;

  div:nth-child(1) {
    font-size: 0.28rem;
    color: #d2d2d3;
    div {
      right: 3%;
      top: 14%;
      font-size: 0.28rem;
    }
  }
  p {
    font-size: 0.32rem;
    margin-top: 2%;
    color: #d2d2d3;
    line-height: 0.4rem;
  }
}
</style>
